/**
* 添加银行卡
*/
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity, ScrollView, TextInput } from "react-native";
import { connect } from 'react-redux';
import { Colors, Dimens, ImageRes } from '../../utils/Assets';
import { create_service } from '../../redux/index.js';
import { Contract } from '../../service/index.js';
import ImagePicker from 'react-native-image-picker'
import { Actions } from 'react-native-router-flux';
import Toast from 'react-native-root-toast';
import { ProgressView } from '../custom/index'
class PersonalAddBankView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            bank_list: []
        }
        this.options = {
            title: '选择照片',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照',
            chooseFromLibraryButtonTitle: '从相册中选取',
            mediaType: 'photo',
            maxWidth: 750,
            maxHeight: 1000,
            quality: 0.5,
        }
        this.pickData = []
        this.userInfo = props.userInfo
    }
    componentDidMount() {
        this.getBankInfo()
    }
    componentWillReceiveProps(nextProps) {
        this.userInfo = nextProps.userInfo
    }
    getBankInfo() {
        this.setState({ loading: true })
        this.props.dispatch(create_service(Contract.GET_BANKS_LIST, {})).then((res) => {
            if (res) {
                for (let index = 0; index < res.length; index++) {
                    this.pickData.push(res[index].name)
                }
                this.setState({ loading: false, bank_list: res })
            } else {
                this.setState({ loading: false })
            }
        })
    }
    addClick() {
        if (!this.state.bank_card) {
            Toast.show('请填写银行卡号', { position: Toast.positions.CENTER })
            return
        }
        if (!this.state.bank_id) {
            Toast.show('请选择发卡行', { position: Toast.positions.CENTER })
            return
        }
        if (!this.mobile) {
            Toast.show('请输入银行卡预留手机号码', { position: Toast.positions.CENTER })
            return
        }
        let params = {
            type: '00',
            token: this.userInfo.token,
            bank_id: this.state.bank_id,
            bank_card: this.state.bank_card,
            mobile: this.mobile,
        }
        this.setState({ loading: true })
        this.props.dispatch(create_service(Contract.POST_USER_CARD_ADD, params)).then((res) => {
            if (res) {
                if (this.props.reloadList) {
                    this.props.reloadList()
                }
                Actions.pop()
                Toast.show('添加成功', { position: Toast.positions.CENTER })
            }
            this.setState({ loading: false })
        })
    }
    showImagePicker() {
        ImagePicker.showImagePicker(this.options, (response) => {
            if (response.didCancel) { } else if (response.error) { } else if (response.customButton) { } else {
                let source = { uri: Dimens.isIOS ? response.uri.replace('file://', '') : response.uri, isStatic: true }
                this.uploadImage(source.uri)
            }
        })
    }
    uploadImage(image) {
        this.setState({ loading: true })
        let filename = image.substr(image.lastIndexOf('/') + 1)
        let bank_image = { uri: image, type: 'multipart/form-data', name: filename };
        this.props.dispatch(create_service(Contract.POST_USER_OCR_BANK, { bank_image: bank_image, token: this.userInfo.token })).then((res) => {
            if (res) {
                this.setState({ bank_card: res.bank_card_number, loading: false })
            } else {
                this.setState({ loading: false })
            }
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
                    <View style={{ padding: 15, flexDirection: 'row', backgroundColor: "#ffffff", marginTop: 10, height: 50 }}>
                        <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', width: 100 }}>真实姓名</Text>
                        <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', width: 100 }}>{this.userInfo.user.real_name}</Text>
                    </View>
                    <View style={{ padding: 15, flexDirection: 'row', backgroundColor: "#ffffff", marginTop: 1, height: 50 }}>
                        <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', width: 100 }}>身份证号</Text>
                        <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center' }}>{this.userInfo.user.idcard}</Text>
                    </View>
                    <View style={{ paddingHorizontal: 15, paddingVertical: 5, flexDirection: 'row', backgroundColor: "#ffffff", marginTop: 10 }}>
                        <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', width: 100 }}>储蓄卡</Text>
                        <TextInput style={{ fontSize: 15, color: '#333333', height: 40, flex: 1 }}
                            onChangeText={(text) => {
                                this.setState({ bank_card: text })
                            }}
                            keyboardType={'number-pad'}
                            placeholderTextColor={'#999999'}
                            underlineColorAndroid={'transparent'}
                            placeholder={'请输入储蓄卡号'}
                            value={this.state.bank_card}
                        />
                        <TouchableOpacity style={{ justifyContent: 'center' }} activeOpacity={0.8} onPress={() => {
                            this.showImagePicker()
                        }}>
                            <Image source={ImageRes.personal_camer} style={{ width: 33, height: 25, alignSelf: 'center' }}></Image>
                        </TouchableOpacity>
                    </View>
                    <TouchableOpacity style={{ paddingHorizontal: 15, flexDirection: 'row', backgroundColor: "#ffffff", marginTop: 1, height: 50 }} activeOpacity={0.8} onPress={() => {
                        if (!this.state.bank_card) {
                            Toast.show('请先填写银行卡号', { position: Toast.positions.CENTER })
                            return
                        }
                        Actions.custormPicker({
                            callback: (value) => {
                                this.setState({ selBank: value.label, bank_id: this.state.bank_list[value.index].id })
                            },
                            pickData: this.pickData
                        })
                    }}>
                        <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', width: 100 }}>发卡行</Text>
                        <Text style={{ flex: 1, fontSize: 15, color: this.state.selBank ? "#333333" : "#999999", alignSelf: 'center', width: 100 }}>{this.state.selBank ? this.state.selBank : '请选择发卡行'}</Text>
                        <Image source={ImageRes.team_right_arrow} style={{ width: 10, height: 16, alignSelf: 'center', marginLeft: 10 }} />
                    </TouchableOpacity>
                    <View style={{ paddingHorizontal: 15, paddingVertical: 5, flexDirection: 'row', backgroundColor: "#ffffff", marginTop: 1 }}>
                        <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', width: 100 }}>手机号码</Text>
                        <TextInput style={{ fontSize: 15, color: '#333333', height: 40, flex: 1 }}
                            onChangeText={(text) => {
                                this.mobile = text
                            }}
                            keyboardType={'number-pad'}
                            placeholderTextColor={'#999999'}
                            underlineColorAndroid={'transparent'}
                            placeholder={'请输入银行卡预留手机号码'}
                            maxLength={11}
                        />
                    </View>
                    <TouchableOpacity style={{ marginTop: 50, backgroundColor: '#ff2121', justifyContent: 'center', marginHorizontal: 15, paddingVertical: 15, borderRadius: 5 }} activeOpacity={0.8} onPress={() => {
                        this.addClick()
                    }}>
                        <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center' }}>提交</Text>
                    </TouchableOpacity>
                </ScrollView>
                <ProgressView show={this.state.loading} />
            </View >
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.bg_color
    }
});
function mapStateToProps(state) {
    return {
        userInfo: state.auth.userInfo
    }
}
const ExportView = connect(mapStateToProps)(PersonalAddBankView);
module.exports.PersonalAddBankView = ExportView
